<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>登录</title>
		<link href="css/weui.min.css" rel="stylesheet" />
		<link href="css/jquery-weui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link href="css/flex.css" rel="stylesheet" />
		<link href="fonts/iconfont.css" rel="stylesheet" />
		<script src="js/immersed.js"></script> 
		<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
				border: 0;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				-webkit-tap-highlight-color: transparent;
			}
			
			input {
				-webkit-appearance: none;
				/* 娓呴櫎ios鍐呴槾褰� */
			}
			
			html,
			body {
				width: 100%;
				background-color: #fff;
				overflow-y: hidden;
			}
			/*.main-body {
				position: fixed;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
			}*/
			
			.header {
				background-image: url(images/banner_bg.jpg);
				background-repeat: no-repeat;
				background-position: center center;
				background-size:  auto 100%;
				text-align: center;
				padding: 70px 0;
			}
			
			.logo {
				width: 40%;
			}
			
			#login1 {
				padding: 20px 20px;
			}
			
			.yiui-phone-input {
				border: #ccc 1px solid;
				height: 50px;
				line-height: 30px;
				font-size: 16px;
				width: 100%;
				border-radius: 5px;
				background-color: #fff;
				text-indent: 40px;
			}
			
			.yiui-phone-input:focus {
				border: #999 1px solid;
				outline: none;
			}
			
			.yiui-input-row {
				justify-content: center;
				position: relative;
				margin: 10px 0;
				height: 50px;
			}
			
			.yiui-input-row .sicon {
				position: absolute;
				left: 10px;
				top: 7px;
				font-size: 25px;
				color: #999
			}
			
			.yiui-input-row .reloadverify {
				position: absolute;
				right: 1px;
				top: 1px;
				height: 48px;
				border-radius: 5px;
			}
			
			.next {
				background-color: #45A75C;
				color: #fff;
				display: block;
				width: 100%;
				height: 50px;
				border-radius: 5px;
				font-size: 16px;
			}
			
			.next:focus {
				outline: none;
			}
			
			.next.disabled {
				background-color: #91ac97;
				color: #666
			}
			
			.next2 {
				background-color: #fff;
				color: #999;
				display: block;
				width: 100%;
				height: 50px;
				border-radius: 5px;
				font-size: 14px;
			}
			
			.next2:focus {
				outline: none;
			}
			
			.next2.disabled {
				background-color: #91ac97;
				color: #666
			}
		</style>

	</head>

	<body>
		<div id="content">
			<div class="header">
				<img src="images/logo.png" class="logo">
			</div>
			<div id="login1">
				<div>
					<div class="yiui-input-row">
						<i class="iconfont icon-mobile sicon"></i>
						<input type="tel" value="" id="phone" name="phone" placeholder="手机号" class="yiui-phone-input sphone">
					</div>
					<div class="yiui-input-row">
						<i class="iconfont icon-keyboard sicon"></i>
						<img id="verifyImg" class="reloadverify" src="">
						<input type="tel" value="" id="verify" name="verify" placeholder="验证码" class="yiui-phone-input">
					</div>

					<div class="yiui-input-row" style="margin-top: 10px;">
						<button id='nextBtn' class="next">下一步</button>
					</div><br />
					<div class="yiui-input-row" style="margin-top: 10px;">
						<button class="next2" onclick="wsClose()">返回密码登录</button> 
					</div>
				</div>
			</div>
		</div>

		<script src="js/mui.min.js"></script>
		<script src="js/jquery-2.1.4.js"></script>
		<script src="js/jquery-weui.min.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/smarge.js"></script>
		<script src="js/common.js"></script>

		<script>
			mui.init({
				swipeBack:false
			});

			var ws = null;

			mui.plusReady(function() {

			plus.webview.currentWebview().setStyle({
						softinputMode: "adjustResize"
					});

				$(document).on('click', '#nextBtn', function(e) {
					
					var _phone = $("#phone").val();
					var _verify = $("#verify").val();
					var _data = {
						phone: _phone,
						verify: _verify
					}
					$("#nextBtn").html("提交中...").attr('disabled', true).addClass('disabled');

					Get(SERVER_URL+"&c=Public&a=getSms", _data, function(data) {
						$("#nextBtn").html("下一步").attr('disabled', false).removeClass('disabled');
						if(data.status) {
							mui.toast(data.info);
							clicked('phone_login_sms.html?phone=' + _data.phone,'pop-in');
						} else {
							$(".reloadverify").click();
							mui.alert(data.info);
						}
					});

				});

			});


			//刷新验证码
			var verifyimg = SERVER_URL+'&c=Public&a=verify'; 
			$("#verifyImg").attr("src",verifyimg);
			$(".reloadverify").on('click', function() {
				if(verifyimg.indexOf('?') > 0) {
					$("#verifyImg").attr("src", verifyimg + '&random=' + Math.random());
				} else {
					$("#verifyImg").attr("src", verifyimg.replace(/\?.*$/, '') + '?' + Math.random());
				}
			});

			
		</script>
	</body>

</html>